<template>
  <div class="home">
    <div class="home_header">
      <button @click="onClick">点击</button>
    </div>
    <div class="home_content" @scroll="onScroll">
      <div class="home_content_wrapper">
        <div v-for="index in 20"
        :key="index"
        class="home_item_container">{{index}}</div>
      </div>
    </div>
    <div class="loading_container"
    v-show="isLoading">
      <img src="../assets/loading.gif"/>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  data(){
    return{
      isLoading:false
    }
  },
  methods:{
    onScroll(event){
      // console.log(event);
      //获取可视区域的高度
      var clientHeight = event.target.clientHeight;
      // 获取滚动视图的高度  
      var scrollHeight = event.target.scrollHeight;
      //获取滚动视图的滚动距离
      var scrollToTop  = event.target.scrollTop;
      
      if(scrollHeight-scrollToTop-clientHeight === 0){
        this.isLoading = true;
        setTimeout(()=>{
      
          this.isLoading = false;
        },3000)
      }
    },
    onClick(){
      this.$router.push("/about")
    }
  }
}
</script>

<style scoped>
.home_header
{
  width: 100%;
  height: 10vh;
  border: 1px solid red;
}

.home_content
{
  width: 100%;
  height: 80vh;
  border: 1px solid blue;
  overflow: scroll;
}

.home_content_wrapper
{
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.home_item_container
{
  width: 30%;
  height: 40vh;
  border: 1px solid rebeccapurple;
  margin: 10px;
}

.loading_container
{
  width: 100%;
  height: 10vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.loading_container img
{
  width: 100px;
}
</style>
